<style>
  .createCm h3 {
    margin: 0 !important;
    font-weight: bold;
    color: #999;
  }
  .cm-container {
    margin: 20px 0;
  }
  .cm-indent {
    text-indent: 3em;
  }
  .box-cm-active {
    box-shadow:0px 0px 4px 0px rgba(238,49,49,1) inset !important;
  }
  .calendar_container{
    width: 150px;
  }
  .custom_container{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .custom_container>div{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .custom_title{
    padding-left: 8px;
    width: 105px;
    position: relative;
  }
  .custom_title>span{
    position: absolute;
    left: 0px;
  }
  .alignItems{
    align-items: flex-start!important;
  }
  .hl-radio-container li{
    margin-bottom: 10px;
  }
</style>

<section id="createCm" class="createCm mlr-24">
  <h3 class="border-b l-h-40 font-16">跟进客户</h3>
  <div class="cm-container">

    <div class="cm-wrap border-b pb-10">
      <div class="cm-title color-gray">主要信息</div>
      <div class="dy-flex pt-10 line-height-34">
        <div class="dy-fx-2 color-666"><span class="required">*</span>客户名称:</div>
        <div class="dy-fx-4"><input type="text" class="form-control" v-model="customerData.name" /></div>
        <div class="dy-fx-3"></div>
        <div class="dy-fx-2 color-666"><span style="color:white;">*</span>简称:</div>
        <div class="dy-fx-4"><input type="text" class="form-control" v-model="customerData.shortName" /></div>
      </div>
      <div class="dy-flex pt-10 line-height-34">
        <div class="dy-fx-2 color-666"><span class="required">*</span>客户状态:</div>
        <div class="dy-fx-4">
          <hl-select width="100%" :data="customerStateData" v-model="selectedCustomerState" type="primary"></hl-select>
        </div>
        <div class="dy-fx-3"></div>
        <div class="dy-fx-2 color-666"><span class="required">*</span>客户类型:</div>
        <div class="dy-fx-4">
          <ul class="cr-type-select clearfix">
            <li v-for="item in type" :class="{active: item.type == customerData.type}" @click="customerData.type = item.type">{{item.name}}</li>
          </ul>
        </div>
      </div>
	  <div class="dy-flex pt-10 line-height-34" v-if="selectedCustomerState.includes('LS')">
	  	<div class="dy-fx-2 color-666"><span style="color:white;">*</span>流失原因:</div>
	  	<div class="dy-fx-4">
	  		<hl-select width="100%" :data="lsListData" v-model="lsSelectData" type="primary">
	  		</hl-select>
	  	</div>
	  	<div class="dy-fx-3"></div>
	  	<div class="dy-fx-2 color-666"></div>
	  	<div class="dy-fx-4"></div>
	  </div>
      <div class="dy-flex pt-10 line-height-34">
        <div class="dy-fx-2 color-666"><span style="color:white;">*</span>所属行业:</div>
        <div class="dy-fx-4">
          <hl-select width="100%" :data="industryData" v-model="selectedIndustry" type="primary"></hl-select>
        </div>
        <div class="dy-fx-3"></div>
        <div class="dy-fx-2 color-666"><span style="color:white;">*</span>过程管理:</div>
        <div class="dy-fx-4">
          <hl-select width="100%" :data="processData" v-model="selectedProcess" type="primary"></hl-select>
        </div>
      </div>
      <div class="dy-flex pt-10 line-height-34">
        <div class="dy-fx-2 color-666">
          <span style="color:white;">*</span>{{customerData.type == 'QY' ? '纳税人识别号' : '身份证号'}}:
        </div>
        <div class="dy-fx-4"><input type="text" class="form-control" v-model="customerData.idcode" /></div>
        <div class="dy-fx-3"></div>
        <div class="dy-fx-2 color-666"><span style="color:white;">*</span>邮箱:</div>
        <div class="dy-fx-4"><input type="text" class="form-control" v-model="customerData.email" /></div>
      </div>
      <div class="dy-flex pt-10 line-height-34">
        <div class="dy-fx-2 color-666"><span class="required">*</span>联系人:</div>
        <div class="dy-fx-4 clearfix">
          <input type="text" class="form-control pull-left mr-10" style="width:100px;" v-model="customerData.lperson" :class="{'box-cm-active':lspeopleflag}" />
          <input type="text" class="form-control pull-left" style="width:145px;" placeholder="联系电话" v-model="customerData.phone" :class="{'box-cm-active':lsphoneflag}" />
        </div>
        <div class="dy-fx-3"></div>
        <div class="dy-fx-2 color-666"><span style="color:white;">*</span>邮编:</div>
        <div class="dy-fx-4"><input type="text" class="form-control" style="width:170px;" v-model="customerData.zipcode" /></div>
      </div>
      <div class="dy-flex pt-10 line-height-34">
        <div class="dy-fx-2 color-666"><span style="color:white;">*</span>通讯地址:</div>
        <div class="dy-fx-13"><input type="text" class="form-control" v-model="customerData.address" /></div>
      </div>
      <div class="dy-flex pt-10 line-height-34">
        <div class="dy-fx-2 color-666"><span class="required">*</span>渠道分类:</div>
        <div class="dy-fx-13 clearfix">
          <hl-select class="pull-left" :width="180" :data="channelTypeData" v-model="selectedChannelType" type="primary"></hl-select>
          <div class="pull-left" style="marginLeft: 50px;"><span style="color:#fff;">*</span>渠道名称:</div>
          <hl-select class="pull-left" :width="180" :data="channelNameData" v-model="selectedChannelName" type="primary" @on-change="handleChannelNameChange"></hl-select>

          <div class="pull-left" style="marginLeft: 50px;"><span class="required">*</span>是否黑名单:</div>
          <div class="pull-left ml-24">
            <ul class="cr-type-select clearfix">
              <li v-for="item in blacklist" :class="{active: item.type == customerData.blackState}" @click="customerData.blackState = item.type">{{item.name}}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="dy-flex pt-10 line-height-34">
        <div class="dy-fx-2 color-666"><span style="color:white;">*</span>客户备注:</div>
        <div class="dy-fx-13"><textarea class="form-control" rows="5" v-model="customerData.memo"></textarea></div>
      </div>
    </div>

    <!-- 自定义 -->
    <div class="mt-15">
			<hl-custom-fileds :data="tmpData" type="CUSTOMER" v-model="resData"></hl-custom-fileds>
		</div>


    <!-- 跟进记录 -->
    <div class="cm-follow-container border-t">
      <div class="font-14 color-gray pt-10">跟进信息</div>
      <div class="dy-flex pt-10 line-height-34">
        <div class="dy-fx-2 color-666"><span class="required">*</span>跟进时间:</div>
        <div class="dy-fx-5 clearfix dy-flex" style="align-items: center">
          <div class="calendar_container mr-10">
            <web-calendar type="primary" v-model="followTime"></web-calendar>
          </div>
          <input type="text" style="width: 70px;" class="form-control bg-fff pull-left mr-10 text-center" placeholder="时" v-model="h0" />
          <input type="text" style="width: 70px;" class="form-control bg-fff pull-left text-center" placeholder="分"  v-model="m0"/>
        </div>
        <div class="dy-fx-2"></div>
        <div class="dy-fx-2 color-666"><span class="required">*</span>跟进方式:</div>
        <div class="dy-fx-4">
          <hl-select class="pull-left" width="100%" :data="followupData" v-model="selectedFollowType" type="primary"></hl-select>
        </div>
      </div>
      <div class="dy-flex pt-10 line-height-34">
        <div class="dy-fx-2 color-666"><span class="required">*</span>跟进记录:</div>
        <div class="dy-fx-13"><textarea class="form-control" rows="5" v-model="followupmemo"></textarea></div>
      </div>
      <div class="dy-flex pt-10 line-height-34">
        <div class="dy-fx-2 color-666"><span style="color:white;">*</span>计划跟进时间：</div>
        <div class="dy-fx-5 clearfix dy-flex" style="align-items: center">
          <div class="calendar_container mr-10">
            <web-calendar type="primary" v-model="planfollowuptime"></web-calendar>
          </div>
          <input type="text" style="width: 70px;" class="form-control bg-fff pull-left mr-10 text-center" placeholder="时" v-model="h1" />
          <input type="text" style="width: 70px;" class="form-control bg-fff pull-left text-center" placeholder="分" v-model="m1" />
        </div>
        <div class="dy-fx-2"></div>
        <div class="dy-fx-2"></div>
        <div class="dy-fx-4"></div>
      </div>
      <div class="dy-flex pt-10 line-height-34">
        <div class="dy-fx-2 color-666"><span style="color:white;">*</span>计划跟进内容：</div>
        <div class="dy-fx-13"><textarea class="form-control" rows="5" v-model="planfollowupcontent"></textarea></div>
      </div>
    </div>

    <div class="clearfix mt-15">
      <hl-button type="primary" @on-click="postCm">保存</hl-button>
      <hl-button type="outline" @on-click="backToLastPage">返回</hl-button>
    </div>

  </div>
</section>

<script src="modules/customer/scripts/followCmEdit.js" charset="utf-8"></script>
